<template>
  <view class="news-list-page">
    <view class="page-title">热点新闻列表（多样式）</view>
    <NewsCard 
      v-for="(news, index) in hotNewsList" 
      :key="news.title + index" 
      v-bind="news" 
    />
  </view>
</template>

<script setup>
import NewsCard from '@/components/NewsCard.vue';

const hotNewsList = [
  { 
    title: "国产大模型“天工”5.0发布，多模态能力突破行业天花板", 
    source: "科技日报", 
    time: "2025.10.29", 
    comment: 23000, 
    isTop: true 
  },
  { 
    title: "全国智慧交通网络覆盖率达92%，出行效率提升40%", 
    source: "央视新闻", 
    time: "2025.10.28", 
    comment: 15000 
  },
  { 
    title: "A股新能源板块单日暴涨8%，机构称“第三增长曲线已明确”", 
    source: "财经网", 
    time: "2025.10.27", 
    comment: 31000, 
    hasSearch: true, 
    tags: ["新能源", "A股行情", "机构评级"] 
  }
];
</script>

<style scoped>
.news-list-page {
  padding: 20rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}
.page-title {
  font-size: 36rpx;
  font-weight: bold;
  text-align: center;
  margin: 30rpx 0;
}
</style>